<template>
	<view class="page_view">
		<image src="/static/images/user/Group3201@2x.png" class="page_fide" mode=""></image>
		<view class="content_view">
			<u-icon name="close" class="close" @tap="go_back"></u-icon>
			<view class="page_title">
				完善个人信息
			</view>
			<view class="head" @tap="bianji">
				<image :src="head_img" class="head_img" mode=""></image>
				<view class="bianji">
					<u-icon name="edit-pen-fill"></u-icon>
				</view>
			</view>
			<view class="list_view">
				<view class="name list">
					<input type="text" class="name_input" v-model="name" placeholder="请输入您的昵称">
				</view>
				<view class="list" @tap="choose_sex">
					<view class="list_left">
						{{sex}}
					</view>
					<u-icon :name="!sex_show?'arrow-down-fill':'arrow-up-fill'" class="arrow-down-fill"></u-icon>
				</view>
				<view class="name list">
					<input type="number" class="name_input" v-model="phone" placeholder="请输入您的联系方式">
				</view>
			</view>
			<view class="btn">
				<view class="btn1" @tap="submit">
					完成
				</view>
				<view class="btn2" @tap="bak">
					以后再说
				</view>
			</view>
		</view>
		<u-action-sheet :list="head_list" v-model="head_show" @click="head_click"></u-action-sheet>
		<u-action-sheet :list="sex_list" v-model="sex_show" @click="sex_click"></u-action-sheet>
		<!-- <wanl-image-cutter @ok="getCropperImage" @cancel="oncancle" :url="url" :fixed="false" :blob="false"
			:maxWidth="500" :maxHeight="500" /> -->
	</view>
</template>

<script>
	import wanlImageCutter from '@/components/wanl-image-cutter/wanl-image-cutter'
	import graceChecker from '@/utils/graceChecker.js';
	export default {
		components: {
			wanlImageCutter
		},
		data() {
			return {
				name: '',
				sex: '男',
				sex_show: false,
				sex_list: [{
					text: '女'
				}, {
					text: '男'
				}],
				head_list: [{
						text: '更改头像'
					},

				],
				head_show: false,
				phone: '',
				url: '',
				head_img: '',
				sex_index:'',
				user_info:'',
			}
		},
		onLoad() {
			this.user_info = uni.getStorageSync('wanlshop:user')
			if(this.user_info){
				this.head_img =this.user_info.avatar
				this.name =this.user_info.nickname
				this.sex_index = this.user_info.gender
				this.sex = this.sex_index == 0?'女':'男'
				this.phone = this.user_info.mobile
			}
		},
		methods: {
			go_back() {
				uni.navigateBack()
			},
			choose_sex() {
				this.sex_show = true
			},
			sex_click(index) {
				console.log(index)
				this.sex_index = index
				this.sex = this.sex_list[index].text
			},
			bianji() {
				this.head_show = true
			},
			head_click(index) {
				console.log(index)
				this.choose_img()
			},
			async choose_img() {
				
				//#ifdef APP-PLUS
				let result = await this.$store.dispatch("quanxian/requestPermissions",'WRITE_EXTERNAL_STORAGE')
					console.log(result) 
				if (result !== 1) return
				this.$store.state.isCAMERA = true
				// #endif
								
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					success: function(res) {
						that.url = res.tempFilePaths[0];
						console.log(res.tempFilePaths);
					}
				});
			},
			getCropperImage(e) {
				let that = this
				that.path = e.path;
				that.url = '';
				// 上传图片
				that.$api.get({
					url: '/wanlshop/common/uploadData',
					success: updata => {
						console.log(updata)
						that.$api.upload({
							url: updata.data.uploadurl,
							filePath: e.path,
							name: 'file',
							formData: updata.data.storage == 'local' ? null : updata.data.multipart,
							success: res => {
								let resinfo = JSON.parse(res)
								console.log(resinfo)
								that.head_img = resinfo.data.fullurl
							}
						});
					}
				});
			},
			bak(){
				 uni.navigateBack()
			},
			submit(){
				let that = this
				let rul = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
				if(that.name.length <3 || that.name.length >33){
					uni.showToast({
						title:'昵称，至少3-32字符',
						icon:'none'
					})
					return false
				}
				if(!rul.test(that.phone)){
					uni.showToast({
						title:'手机号码格式不正确',
						icon:'none'
					})
					return false
				}
				let data =  {
						avatar: that.head_img?that.head_img:that.user_info.avatar,
						nickname:that.name?that.name:that.user_info.nickname,
						gender:that.sex_index?that.sex_index:that.user_info.gender,
						mobile:that.phone?that.phone:that.user_info.mobile,
					}
				this.$api.post({
					url: '/wanlshop/user/profile', 
					data,
					success: res => {
						this.$store.commit('user/setUserInfo', data);
					    uni.navigateBack()
					}
				});
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #fff;
	}

	.page_fide {
		width: 100%;
		height: 764rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	.content_view {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.close {
		position: absolute;
		top: 120rpx;
		left: 24rpx;
		font-size: 26rpx;
	}

	.page_title {
		width: 100%;
		text-align: center;
		font-size: 38rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #000;
		margin-top: 240rpx;

	}

	.head {
		width: 136rpx;
		height: 136rpx;
		border-radius: 50%;
		margin: 0 auto;
		margin-top: 102rpx;
		position: relative;
	}

	.head_img {
		width: 136rpx;
		height: 136rpx;
		border-radius: 50%;
		background-color: #000;

	}

	.bianji {
		width: 48rpx;
		height: 48rpx;
		background: #FFFFFF;
		border-radius: 50%;
		position: absolute;
		bottom: 0rpx;
		right: 0rpx;
		text-align: center;
		line-height: 48rpx;
	}

	.list_view {
		width: 590rpx;
		margin: 0 auto;
		margin-top: 64rpx;
	}

	.name_input {
		width: 100%;
		height: 116rpx;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #333333;
	}

	.list {
		height: 116rpx;
		border-bottom: 2rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.arrow-down-fill {
		font-size: 22rpx;
	}

	.btn {
		width: 100%;
		padding: 62rpx;
		box-sizing: border-box;
		margin-top: 100rpx;
	}

	.btn1 {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(180deg, #E46C30 0%, #E32C1C 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.btn2 {
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #999999;
		text-align: center;
		margin-top: 50rpx;
	}
</style>